<template>
  <div class="password-recovery-container">
    <!-- 页面标题 -->
    <h2>密码找回</h2>
    <!-- 输入邮箱 -->
    <el-form ref="form" :model="formData" label-width="80px">
      <el-form-item label="邮箱地址">
        <el-input v-model="formData.email" placeholder="请输入你的邮箱地址"></el-input>
      </el-form-item>
      <!-- 发送验证码按钮 -->
      <el-form-item>
        <el-button
            type="primary"
            :disabled="isCountingDown"
            @click="sendVerificationCode"
        >
          {{ isCountingDown? `${countdown}s` : '发送验证码' }}
        </el-button>
      </el-form-item>
      <!-- 输入验证码 -->
      <el-form-item label="验证码">
        <el-input v-model="formData.verificationCode" placeholder="请输入收到的验证码"></el-input>
      </el-form-item>
      <!-- 输入新密码 -->
      <el-form-item label="新密码">
        <el-input v-model="formData.newPassword" placeholder="请输入收到的验证码"></el-input>
      </el-form-item>
      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitRecovery">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "PasswordView",
  data() {
    return {
      formData: {
        email: "",
        verificationCode: "",
        newPassword: "",
      },
      timer: null, // 用于存储倒计时定时器
      countdown: 60, // 倒计时时间，单位：秒
      isCountingDown: false, // 是否正在倒计时
    };
  },
  methods: {
    sendVerificationCode() {
      const emailRegex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
      if (!this.formData.email ||!emailRegex.test(this.formData.email)) {
        this.$message.error("请输入有效的邮箱地址");
        return;
      }
      // 发送验证码到邮箱
      this.axios
          .get("customer/sendEmail", { params: { email: this.formData.email } })
          .then((res) => {
            if (res.data.code == 200) {
              this.$message.success("验证码已发送，请查收你的邮箱。");
            } else {
              this.$message.error(res.data.msg);
            }
            this.startCountdown();
          });
    },
    startCountdown() {
      this.isCountingDown = true;
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.timer);
          this.timer = null;
          this.countdown = 60;
          this.isCountingDown = false;
        }
      }, 1000);
    },
    submitRecovery() {
      this.axios.get("customer/newPassword", {
        params: {
          email: this.formData.email,
          code: this.formData.verificationCode,
          newPassword: this.formData.newPassword,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.$router.push("/login");
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
  },
};
</script>

<style scoped>
.password-recovery-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}
h2 {
  text-align: center;
  margin-bottom: 20px;
}
</style>